<template>
  <cu-layout title="我的订单">
    <template #navbarExtend>
      <uv-tabs
        :active-style="{
          color: $.color.primary,
          fontWeight: 'bold',
          transform: 'scale(1.02)'
        }"
        line-width="30"
        key-name="name"
        :list="state.tabList"
        :scrollable="false"
        :current="tabActive"
        @change="tabChange"
      />
    </template>
    <view class="p-12">
      <view v-for="item in form.list" :key="item.id" class="cu-card">
        <view class="flex-a">
          <uv-tags v-if="item.status === 1" size="mini" text="待发货" type="primary" />
          <uv-tags v-else-if="item.status === 2" size="mini" text="待收货" type="primary" />
          <uv-tags v-else-if="item.pay_status === 1" size="mini" text="已支付" type="success" />
          <uv-tags v-else size="mini" text="未支付" type="info" />
          <view class="ml-8 flex-1">{{ item.order_sn }}</view>
          <view class="text-tips text-13">{{ item.create_date }}</view>
        </view>
        <view class="mt-10">
          <uv-cell title="订单金额">
            <template #value>
              <view class="flex-a">
                <view class="text-tips">数量<text class="ml-3 text-primary font-bold">{{ item.goods_num }}</text>, 共<text class="ml-3 text-primary font-bold">{{ item.goods_price }}</text>元</view>
              </view>
            </template>
          </uv-cell>
          <uv-cell title="商品信息" :value="item.goods_name" />
          <uv-cell title="创建时间" :value="$.utils.formatDate(item.create_time)" />
        </view>
      </view>

      <view class="">
        <uv-load-more :status="form.status" />
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import $ from '@/sheep'
const state = reactive({
  tabList: [
    { type: 0, name: '全部' },
    { type: 1, name: '待发货' },
    { type: 2, name: '待收货' }
  ]
})

const type = ref(0)

const tabActive = computed(() => state.tabList.findIndex(v => v.type === type.value))

const { form, resetForm } = $.useForm({
  list: [],
  page: 1,
  limit: 10,
  status: 'loadmore'
})
onLoad(async(options = {}) => {
  type.value = options.type || 0
  reload()
})

onReachBottom(() => {
  if (form.status !== 'loadmore') return
  form.page += 1
  reload()
})

function reload() {
  if (form.status !== 'loadmore') return
  form.status = 'loading'

  $.get('/user/goods', { type: type.value, page: form.page, limit: form.limit }).then(res => {
    if (form.page > 1) {
      form.list.push(...res.data)
    } else {
      form.list = res.data
    }
    form.status = form.limit > res.data.length ? 'nomore' : 'loadmore'
  })
}

function tabChange(data) {
  type.value = data.type
  resetForm()
  reload()
}
</script>

<style>
</style>
